<template>
    <div class="news_container">
        <header class="news_header">
            <div class="header_title">{{title}}</div>
            <div class="header_sub_title">{{subTitle}}</div>
        </header>
        <div class="news_bodyer" :style="{backgroundColor: backgroundColor}" >
            <div
                :class="[
                    'news_bodyer_item',
                    'column' + column
                ]"
                v-for="item in data.slice(0, +column)"
                :key="item.title"
            >
                <div class="news_bodyer_item_title">{{ item.title }}</div>
                <div class="news_bodyer_item_list" v-for="(listItem, listIndex) in item.list" :key="listItem.time">
                    <div
                        class="left_icon"
                        :style="{backgroundColor: iconType ? color : ''}"
                    >
                        {{ !iconType ? ((listIndex + 1) + '.') : ''}}
                    </div>
                    <div class="list_title">{{ listItem.title }}</div>
                    <div class="list_time">
                        <div class="time">{{ listItem.time }}</div>
                        <div class="right_icon">&gt;</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, computed } from 'vue';

const props = defineProps({
    color: {
        type: String,
        default: "#15ccac",
    },
    subColor: {
        type: String,
        default: "#ababab",
    },
    backgroundColor: {
        type: String,
        default: "#f6f6f6",
    },
    title: {
        type: String,
        default: "标题",
    },
    subTitle: {
        type: String,
        default: "Sub Title",
    },
    iconType: {
        type: Boolean,
        default: true,
    },
    column: {
        type: String,
        default: "1",
    }
})

const data = ref([
    {
        title: '资讯一下',
        list: [
            {
                title: '电商"上山下乡"给农村带来了哪些改变',
                time: '05-12',
            },
            {
                title: '电商"上山下乡"给农村带来了哪些改变',
                time: '05-13',
            },
            {
                title: '电商"上山下乡"给农村带来了哪些改变',
                time: '05-14',
            },
            {
                title: '电商"上山下乡"给农村带来了哪些改变电商"上山下乡"给农村带来了哪些改变',
                time: '05-15',
            },
            {
                title: '电商"上山下乡"给农村带来了哪些改变',
                time: '05-16',
            },
            {
                title: '电商"上山下乡"给农村带来了哪些改变',
                time: '05-17',
            },
        ]
    },
    {
        title: '资讯二下',
        list: [
            {
                title: '电商"上山下乡"给农村带来了哪些改变',
                time: '05-12',
            },
            {
                title: '电商"上山下乡"给农村带来了哪些改变',
                time: '05-13',
            },
            {
                title: '电商"上山下乡"给农村带来了哪些电商"上山下乡"给农村带来了哪些改变改变',
                time: '05-14',
            },
            {
                title: '电商"上山下乡"给农村带来了哪些改变',
                time: '05-15',
            },
            {
                title: '电商"上山下乡"给农村带来了哪些改变',
                time: '05-16',
            },
            {
                title: '电商"上山下乡"给农村带来了哪些改变',
                time: '05-17',
            },
        ]
    },
    {
        title: '资讯三下',
        list: [
            {
                title: '电商"上山下乡"给农村带来了哪些改变',
                time: '05-12',
            },
            {
                title: '电商"上山下乡"给农村带来了哪些改变',
                time: '05-13',
            },
            {
                title: '电商"上山下乡"给农村带来了哪些改变',
                time: '05-14',
            },
            {
                title: '电商"上山下乡"给农村带来了哪些改变',
                time: '05-15',
            },
            {
                title: '电商"上山下乡"给农村带来了哪些改变',
                time: '05-16',
            },
            {
                title: '电商"上山下乡"给农村带来了哪些改变',
                time: '05-17',
            },
        ]
    },
])

const themeColor = computed(() => {
    return props.color;
})
const subThemeColor = computed(() => {
    return props.subColor;
})
</script>

<style lang="scss" scoped>
.news_container {
    width: 100%;

    .news_header {
        width: 100%;
        height: 100px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;

        .header_title {
            font-size: 24px;
            line-height: 40px;
            letter-spacing: 2px;
            color: v-bind(themeColor);
        }

        .header_sub_title {
            font-size: 18px;
            line-height: 30px;
            letter-spacing: 2px;
            color: v-bind(subThemeColor);
        }
    }

    .news_bodyer {
        display: flex;
        justify-content: space-between;
        width: 65%;
        padding: 10px 17.5% 40px;

        .news_bodyer_item {
            .news_bodyer_item_title {
                text-align: center;
                font-family: MicrosoftYaHei;
                font-size: 18px;
                letter-spacing: 1px;
                color: #474747;
                font-weight: 700;
                line-height: 36px;
            }

            .news_bodyer_item_list {
                display: flex;
                justify-content: space-between;
                align-items: center;
                height: 40px;
                padding-top: 10px;
                border-bottom: 1px dotted #777;
                transition: all 0.3s;
                cursor: pointer;

                &:hover {
                    color: v-bind(themeColor);

                    .list_title {
                        color: v-bind(themeColor);
                    }
                }

                .left_icon {
                    width: 5px;
                    height: 5px;
                    margin: 0 20px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    color: v-bind(themeColor);
                }

                .list_title {
                    transition: all 0.3s;
                    font-size: 16px;
                    color: #474747;
                    flex: 1;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                }

                .list_time {
                    display: flex;
                    align-items: center;
                    margin-left: 30px;

                    .time {
                        font-size: 12px;
                    }

                    .right_icon {
                        margin-left: 10px;
                    }
                }
            }
        }

        .column1 {
            width: 100%;
        }
        .column2 {
            width: 45%;
        }
        .column3 {
            width: 30%;
        }
    }

    @media screen and (min-width: 513px) and (max-width: 1024px) {
        .news_bodyer{
            padding: 0 7.5%;
            width: 85%;
            flex-wrap: wrap;

            .news_bodyer_item{
                width: 100%;
            }
        }
    }

    @media screen and (max-width: 512px) {
        .news_header{
            height: 70px;
            .header_title{
                font-size: 18px;
            }
            .header_sub_title{
                font-size: 14px;
            }
        }
        
        .news_bodyer{
            padding: 0 30px;
            width: calc(100% - 60px);
            flex-wrap: wrap;

            .news_bodyer_item{
                width: 100%;
                .news_bodyer_item_title{
                    font-size: 15px;
                }
                
                .news_bodyer_item_list{
                    height: 30px;
                    padding-top: 8px;
                    .left_icon{
                        margin: 0 8px;
                    }
                    .list_title{
                        font-size: 14px;
                    }
                }
            }
        }
    }
}
</style>